.layout-component {
  align-content: start;
  display: grid;
  flex: 1 0 auto;
  gap: 2.4rem;
  grid-template-columns: 100%;
  margin: 20px auto 0;
  max-width: 108.2rem;
  width: 100%;
  background-color: #222222d5;
}
.layout-component + .navigation-footer-component {
  padding-top: 2.4rem;
}
@media (min-width: 60em) {
  .layout-component {
    padding: 1.5rem;
    row-gap: 2rem;
  }
  .layout-component + .navigation-footer-component {
    padding-top: 0.9rem;
  }
  .layout-component:not(.layout-single) {
    grid-template-columns: minmax(0, 1fr) 30rem;
  }
  .layout-component:not(.layout-single) .layout-title {
    grid-column: 1;
    grid-row: 1;
  }
  .layout-column-one {
    grid-column: 1;
  }
  .layout-column-two {
    grid-column: 2;
  }
  .layout-component.layout-title-in-sidebar {
    grid-template-rows: auto 1fr;
  }
  .layout-component.layout-title-in-sidebar .layout-title {
    grid-column: 2;
    grid-row: 1;
  }
  .layout-component.layout-title-in-sidebar .layout-column-one {
    grid-column: 1;
    grid-row: 1/3;
  }
}
